<!DOCTYPE html>
<meta charset="utf-8">
<title>Force-directed graph</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script src="./scripts/d3.min.js"></script>
<script src="./scripts/communication.js"></script>
<script src="./scripts/draw.js"></script>
<script src="./scripts/table.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<link rel="stylesheet" href="./css/style.css">
<body>
    <div id="main">
        <div id="main_filter_options">
            NodeType: 
            <form>
                <label><input type="checkbox" value="company" class="NodeType" checked>company</label>
                <label><input type="checkbox" value="organization" class="NodeType">organization</label>
                <label><input type="checkbox" value="person" class="NodeType">person</label>
                <label><input type="checkbox" value="political_organization" class="NodeType">political_organization</label>
                <label><input type="checkbox" value="location" class="NodeType" checked>location</label>
                <label><input type="checkbox" value="vessel" class="NodeType" checked>vessel</label>
                <label><input type="checkbox" value="event" class="NodeType">event</label>
                <label><input type="checkbox" value="movement" class="NodeType">movement</label>
                <label><input type="checkbox" value="undefined" class="NodeType" checked>undefined</label>
            </form>
            Emphasize: 
            <form>
                <label><input type="radio" name="zoom" value="company" class="Zoom" checked>company</label>
                <label><input type="radio" name="zoom" value="organization" class="Zoom">organization</label>
                <label><input type="radio" name="zoom" value="person" class="Zoom">person</label>
                <label><input type="radio" name="zoom" value="political_organization" class="Zoom">political_organization</label>
                <label><input type="radio" name="zoom" value="location" class="Zoom">location</label>
                <label><input type="radio" name="zoom" value="vessel" class="Zoom">vessel</label>
                <label><input type="radio" name="zoom" value="event" class="Zoom">event</label>
                <label><input type="radio" name="zoom" value="movement" class="Zoom">movement</label>
            </form>
            EdgeType: 
            <form>
                <label><input type="checkbox" value="membership" class="EdgeType" checked>membership</label>
                <label><input type="checkbox" value="partnership" class="EdgeType" checked>partnership</label>
                <label><input type="checkbox" value="ownership" class="EdgeType" checked>ownership</label>
                <label><input type="checkbox" value="family_relationship" class="EdgeType">family_relationship</label>
            </form>

            <div>
                <button class = "confirm_button" id="main_filter">确认应用过滤规则</button>
            </div>
        </div>
        <div id="main_graph">
            <svg id="main_graph_layout"></svg>
        </div>
    </div>

    <div id="details">
        <div id="detail_filter_options">
            <div id="detail_header"></div>
            <div>
                SubGraph-Hop
                <form>
                    <label><input type="radio" name="hop" value=1 class="Hop" checked>1-hop</label>
                    <label><input type="radio" name="hop" value=2 class="Hop">2-hop</label>
                    <label><input type="radio" name="hop" value=3 class="Hop">3-hop</label>
                </form>
            </div>
            <div>
                Search: <input type="text" placeholder="please input target's id" id="Search">
                <button  class = "confirm_button" id="detail_filter">确认搜索</button>
            </div>
        </div>
        <div id="detail_info">
            <table id="relationTable" class="DataTable">
                <thead>
                  <tr>
                    <th>Id</th>
                    <th>Type</th>
                    <th>Hops</th>
                    <th>Relation</th>
                  </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="sub_graph">
            <svg id="sub_graph_layout"></svg>
            <svg id="tsne_layout_node"></svg>
            <svg id="tsne_layout_edge"></svg>
        </div>
        <div id="charts">
            <svg id="barchart_layout"></svg>
            <svg id="histogram_layout"></svg>
        </div>
    </div>

</body>